<template>
  <div class='container'>
    <el-dialog title="题目预览" :visible="showDialog" @close="handleCloseDialog" @open="handleOpenDialog">

    <el-row>
      <el-col :span="6">【题型】：<span>{{ quesType }}</span></el-col>
      <el-col :span="6">【编号】：<span>{{ quesDetail.id }}</span></el-col>
      <el-col :span="6">【难度】：<span>{{ diffficulty }}</span></el-col>
      <el-col :span="6">【标签】：<span>{{ quesDetail.tags }}</span></el-col>
    </el-row>

    <el-row style="padding-top:20px">
      <el-col :span="6">【学科】：<span>{{ quesDetail.subjectName }}</span></el-col>
      <el-col :span="6">【目录】：<span>{{ quesDetail.directoryName }}</span></el-col>
      <el-col :span="6">【方向】：<span>{{ quesDetail.direction }}</span></el-col>
    </el-row>

    <el-divider></el-divider>

    <el-row>
      <el-col>【题干】：<p v-html="quesDetail.question"></p></el-col>
    </el-row>

    <div v-if="quesType === '单选题'" class="radio">
      <el-radio-group v-model="right">
         <el-radio
         v-for="item in quesDetail.options"
         :key="item.id"
         :label="item.code"
         style="display:block;padding-top:10px;margin-left:10px"
         >{{ item.code }}</el-radio>
      </el-radio-group>
    </div>

    <div v-else class="checkbox">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
        v-for="item in quesDetail.options"
        :key="item.id"
        :label="item.code"
        style="display:block;padding-top:10px;margin-left:10px"
        >{{ item.code }}</el-checkbox>
      </el-checkbox-group>
    </div>

    <el-divider></el-divider>
    <el-row>
      【参考答案】：<el-button type="danger" size="mini" @click="isShow=!isShow">视频答案预览</el-button>
      <p v-if="isShow">
         <video :src="quesDetail.videoURL" width="300px" height="300px" controls></video>
      </p>
    </el-row>

    <el-divider></el-divider>
    <el-row>
      【答案解析】：<span v-html="quesDetail.answer"></span>
    </el-row>

    <el-divider></el-divider>
    <el-row>
      【题目备注】：<span v-html="quesDetail.remarks"></span>
    </el-row>

    <template #footer>
      <el-button type="primary" @click="handleCloseDialog()">关闭</el-button>
    </template>
   </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  props: {
    id: {
      type: [String, Number],
      required: true
    },

    showDialog: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    quesType () {
      return this.quesDetail.questionType === '1' || this.quesDetail.questionType === '单选' ? '单选题' : '多选题'
    },

    diffficulty () {
      if (this.quesDetail.diffficulty === '简单' || this.quesDetail.diffficulty === '1') {
        return '简单'
      } else if (this.quesDetail.diffficulty === '一般' || this.quesDetail.diffficulty === '2') {
        return '一般'
      } else {
        return '困难'
      }
    }
  },

  data () {
    return {
      quesDetail: {},
      checkList: [],
      radio: '1',
      isShow: false,
      right: ''
    }
  },

  methods: {
    handleCloseDialog () {
      this.$emit('update:showDialog', false)
    },

    async handleOpenDialog () {
      const { data } = await detail({ id: this.id })
      this.quesDetail = data
      if (data.questionType === '1' || data.questionType === '单选') {
        this.right = data.options.find(item => item.isRight === 1).code
      } else {
        const tempList = data.options.filter(item => item.isRight === 1)
        this.checkList = tempList.map(item => item.code)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__footer {
    text-align: right;
  }
}
</style>
